<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'Login',
    setup() {
      const state = reactive({
        form: {
          username: 'admin',
          password: '123456'
        },
        redirect: undefined
      })
      const router = useRouter()
      const handleSubmit = () => {
        router.push('/learn')
      }
      return {
        ...toRefs(state),
        handleSubmit
      }
    }
  })
</script>

<template>
  <div class="login-container">
    <a-row>
      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16">
        <div class="login-container-video"></div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="login-container-form">
          <div class="login-container-hello">hello!</div>
          <div class="login-container-title">欢迎来到</div>
          <a-form :model="form" @submit="handleSubmit" @submit.prevent>
            <a-form-item>
              <a-input v-model:value="form.username" placeholder="Username">
                <template v-slot:prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input v-model:value="form.password" type="password" placeholder="Password">
                <template v-slot:prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                :disabled="form.username === '' || form.password === ''"
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <div class="login-container-tips">Copyright © 2021.Donghua University All rights reserved</div>
  </div>
</template>

<style lang="less" scoped>
  .login-container {
    width: 100%;
    height: 100vh;
    // background: url('~@index/assets/images/ui/login_background.png');
    background-size: cover;
    &-form {
      width: calc(100% - 40px);
      height: 380px;
      padding: 4vh;
      margin-top: calc((100vh - 380px) / 2);
      margin-right: 20px;
      margin-left: 20px;
      // background: url('~@index/assets/images/ui/login_form.png');
      background-size: 100% 100%;
      border-radius: 10px;
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }
    &-hello {
      font-size: 32px;
      color: #fff;
    }
    &-tips {
      position: fixed;
      bottom: 20px;
      width: 100%;
      height: 40px;
      color: rgba(255, 255, 255, 0.856);
      text-align: center;
    }
    &-title {
      margin-bottom: 30px;
      font-size: 20px;
      color: #fff;
    }
    &-video {
      width: 100%;
      height: 100%;
      padding-top: 20px;
      position: relative;
      text-align: center;
      &-b {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 660px;
        height: 420px;
        transform: translate(-50%, -50%);
        .title {
          height: 150px;
          line-height: 160px;
          font-size: 26px;
          text-align: center;
          color: #fff;
        }
        video {
          max-width: 100%;
        }
      }
    }
    ::v-deep(.ant-col) {
      width: 100%;
      padding: 0 10px 0 10px;
    }
    ::v-deep(.ant-input) {
      height: 35px;
    }
    ::v-deep(.ant-btn) {
      width: 100%;
      height: 45px;
      border-radius: 99px;
    }
  }
</style>
